<template>
	<div>
		
		<el-form class="demo-ruleForm" :label-position="labelPosition"
		    label-width="120px"
		    >
			<el-row class='container'>
				<el-page-header @back="goback" content="">
				</el-page-header>
				<!-- <el-col style="margin-top: 20px;">
					<el-button @click="feed">喂养</el-button>
					<el-button @click="update">编辑</el-button>
					<el-button @click="saveLoss">报损</el-button>
					<el-button style="color:red;">删除</el-button>
				</el-col> -->
				<el-col :span="12" style="margin-top: 20px;">
				    <el-form-item label="种苗名称：" prop="type">
				       {{this.ruleForm.breedName}}
				    </el-form-item>
					<el-form-item label="养殖批号：" prop="spec">
					    {{this.ruleForm.batch}}
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="品种名称：" prop="inputsName">
					    {{this.ruleForm.seedName}}
					</el-form-item>
					<el-form-item label="养殖日期：">
					   {{this.ruleForm.time}}
					</el-form-item>
				</el-col>
				<el-col>
					<el-form-item label="养殖负责人：" prop="type">
						{{this.ruleForm.principalName}}
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="基地：" prop="type">
						{{this.ruleForm.breedBaseName}}
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="养殖区域：" prop="type">
						{{this.ruleForm.soilName}}
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="container" style="margin-top:20px;">
				<h3>养殖详情</h3>
				<el-row style="margin-top:20px;">
				    <el-col :span="7">
				        <el-input placeholder="编号/绑定设备" v-model="searchName" style="width:300px;">
				            <i slot="prefix" class="el-input__icon el-icon-search"></i>
				            <el-button slot="append" @click="handleSearch">搜索</el-button>
				        </el-input>
				    </el-col>
				</el-row>
				<el-table
				    :data="tableData"
				    border
				    style="margin-top:20px;"
				    ref="multipleTable"
				    header-cell-class-name="table-header"
				>
				    <el-table-column prop="time" sortable label="导入时间"></el-table-column>
					<el-table-column prop="type" sortable label="编号类型"></el-table-column>
					<el-table-column prop="code" sortable label="编号"></el-table-column>
					<el-table-column prop="sex" sortable label="性别"></el-table-column>
					<el-table-column prop="equipmentName" sortable label="绑定设备"></el-table-column>
					<!-- <el-table-column label="操作" width="150" align="center">
					    <template slot-scope="scope">
							<el-button
							    type="text"
								style="color: red;"
							    @click="handleDelete(scope.$index, scope.row)"
							>删除</el-button>
					    </template>
					</el-table-column> -->
				</el-table>
				<el-pagination
				    layout="total, prev, pager, next, jumper"
				    :page-size="pagesize"
				    :current-page.sync="page"
				    :total="total"
				    @current-change="handleCurrentChange"
				    style="margin-top:20px"
				></el-pagination>
			</el-row>
			<el-row class="container" style="margin-top:20px;">
				<h3>喂养详情</h3>
				<el-row style="margin-top:20px;">
				    <el-col :span="7">
				        <el-input placeholder="品名/投入品批号/喂养负责人" v-model="searchName1" style="width:300px;">
				            <i slot="prefix" class="el-input__icon el-icon-search"></i>
				            <el-button slot="append" @click="handleSearch1">搜索</el-button>
				        </el-input>
				    </el-col>
				</el-row>
				<el-table
				    :data="tableData1"
				    border
				    style="margin-top:20px;"
				    ref="multipleTable"
				    header-cell-class-name="table-header"
				>
				    <el-table-column prop="inputsType" sortable label="投入品类型"></el-table-column>
					<el-table-column prop="inputsName" sortable label="品名"></el-table-column>
					<el-table-column prop="inputsBatch" sortable label="投入品批号"></el-table-column>
					<el-table-column prop="useNumber" sortable label="投入数量"></el-table-column>
					<el-table-column prop="feedTime" sortable label="喂养日期"></el-table-column>
					<el-table-column prop="principalName" sortable label="喂养负责人"></el-table-column>
					<!-- <el-table-column label="操作" width="150" align="center">
					    <template slot-scope="scope">
							<el-button
							    type="text"
								style="color: red;"
							    @click="handleDelete1(scope.$index, scope.row)"
							>删除</el-button>
					    </template>
					</el-table-column> -->
				</el-table>
				<el-pagination
				    layout="total, prev, pager, next, jumper"
				    :page-size="pagesize"
				    :current-page.sync="page1"
				    :total="total1"
				    @current-change="handleCurrentChange1"
				    style="margin-top:20px"
				></el-pagination>
			</el-row>
			<el-row class="container" style="margin-top:20px;">
				<h3>报损详情</h3>
				<el-row style="margin-top:20px;">
				    <el-col :span="7">
				        <el-input placeholder="品名/投入品批号/喂养负责人" v-model="searchName2" style="width:300px;">
				            <i slot="prefix" class="el-input__icon el-icon-search"></i>
				            <el-button slot="append" @click="handleSearch2">搜索</el-button>
				        </el-input>
				    </el-col>
				</el-row>
				<el-table
				    :data="tableData2"
				    border
				    style="margin-top:20px;"
				    ref="multipleTable"
				    header-cell-class-name="table-header"
				>
				    <el-table-column prop="time" sortable label="报损日期"></el-table-column>
					<el-table-column prop="number" sortable label="报损数量"></el-table-column>
					<el-table-column prop="reason" sortable label="报损原因"></el-table-column>
					<el-table-column prop="principalName" sortable label="报损人"></el-table-column>

					<!-- <el-table-column label="操作" width="150" align="center">
					    <template slot-scope="scope">
							<el-button
							    type="text"
								style="color: red;"
							    @click="handleDelete2(scope.$index, scope.row)"
							>删除</el-button>
					    </template>
					</el-table-column> -->
				</el-table>
				<el-pagination
				    layout="total, prev, pager, next, jumper"
				    :page-size="pagesize"
				    :current-page.sync="page2"
				    :total="total2"
				    @current-change="handleCurrentChange2"
				    style="margin-top:20px"
				></el-pagination>
			</el-row>
			<el-form-item class="footerFixed" label-width="0px">
			    <el-button @click="goback">返回</el-button>
			</el-form-item>
		</el-form>
		<el-dialog title="报损" :visible.sync="dialogFormVisible" width="500px">
		    <el-form :model="ruleForm"  ref="ruleForm" :label-position="labelPosition" label-width="120px">
		        <el-row style="margin: 10px 0 20px 0">
		            <el-col :span="16">
		                <el-form-item label="报损日期：" >
		                    <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="loss.time" style="width: 300px;"></el-date-picker>
		                </el-form-item>
		                <el-form-item label="报损数量：">
		                    <el-input v-model.number="loss.number" type="number"  style="width:300px">
		                        <template slot="append">
		                            <!-- {{ruleForm.lossUnits}} -->
		                        </template>
		                    </el-input>
		                </el-form-item>
		                <el-form-item label="报损人：" prop="name" >
		                    <el-select v-model="principal" @change="choosePrincipal" value-key="id" filterable placeholder="请选择"  style="width:300px">
		                        <el-option
		                            v-for="item in userList"
		                            :key="item.name"
		                            :label="item.name"
		                            :value="item"
		                        >
		                        </el-option>
		                    </el-select>
		                </el-form-item>
		                <el-form-item label="报损原因：">
		                    <el-input type="textarea" v-model="loss.reason" style="width:300px"></el-input>
		                </el-form-item>
		            </el-col>
		        </el-row>
		    </el-form>
		    <div slot="footer" class="dialog-footer">
		        <el-button @click="dialogFormVisible = false">取 消</el-button>
		        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
		    </div>
		</el-dialog>
	</div>
</template>

<script>
import { breed_findById,breed_detail_findByList,feed_findByList,loss_findByList,breed_loss } from '@/request/breedApi';
import { user_findByAll } from '@/request/api';
	export default{
		data(){
			return{
				principal:"",
				dialogFormVisible:false,
				ruleForm:{},
				loss:{},
				labelPosition:'right',
				tableData:[],
				tableData1:[],
				tableData2:[],
				userList:[],
				searchName:'',
				searchName1:'',
				searchName2:'',
				pagesize:10,
				page:1,
				total:0,
				page1:1,
				total1:0,
				page2:1,
				total2:0
				
			}
		},
		mounted() {
			this.init();
			this.yangzhiList()
			this.weiyangList()
			this.baosunList()
		},
		methods:{
			handleCurrentChange2(val){
				this.page2 = val
				this.baosunList()
			},
			handleCurrentChange1(val){
				this.page1 = val
				this.weiyangList()
			},
			
			handleCurrentChange(val){
				this.page = val
				this.yangzhiList() 
			},
			
			baosunList(){
				//报损列表
				var params2 = {
					"breedId": this.$route.query.id,
					"searchName": this.searchName2,
					"page": this.page2
				}
				loss_findByList(params2).then((res) => {
					this.tableData2 = res.rows;
					this.total2 = res.total;
				});
			},
			// 返回上一页 顶部使用 和取消按钮
			goback(){
				this.$router.go(-1)
			},
			yangzhiList(){
				//养殖详情列表
				var params = {
					"relevanceId": this.$route.query.id,
					"searchName": this.searchName,
					"page": this.page
				}
				breed_detail_findByList(params).then((res) => {
					this.tableData = res.rows;
					this.total = res.total;
				});
			},
			weiyangList(){
				//喂养列表
				var params1 = {
					"breedId": this.$route.query.id,
					"searchName": this.searchName1,
					"page": this.page1
				}
				feed_findByList(params1).then((res) => {
					this.tableData1 = res.rows;
					this.total1 = res.total;
				});
			},
			init() {
				breed_findById(this.$route.query.id).then((res) => {
					this.ruleForm = res.data;
				});
				
				
			},
			// 养殖详情删除
			handleDelete(index,row){
				
			},
			// 养殖详情的搜索
			handleSearch(){
				this.page = 1
				this.yangzhiList()
			
			},
			// 喂养详情删除
			handleDelete1(index,row){
				
			},
			// 喂养详情的搜索
			handleSearch1(){
				this.page1 = 1
				this.weiyangList()
			},
			// 报损详情删除
			handleDelete2(index,row){
			},
			// 报损详情的搜索
			handleSearch2(){
				this.page2 = 1
				this.baosunList()

			},
			//跳转喂养
			feed() {
				this.$router.push({
					path: '/yzbreeding/feed',
					query: {
						batch: this.ruleForm.batch
					}
				});
			},
			//编辑跳转
			update() {
				this.$router.push({
					path: '/yzbreeding/added',
					query: {
						id: this.ruleForm.id
					}
				});
			},
			//报损
			saveLoss() {
				user_findByAll("").then((res) => {
                	this.userList = res.data;
           		});
            	this.loss.breedId = this.$route.query.id;
				this.dialogFormVisible = true;
			},
			choosePrincipal(ele) {
				this.loss.principalId = ele.id;
				this.loss.principalName = ele.name;
			},
			submitForm() {
				breed_loss(this.loss).then((res) => {
					if (res.code == 200) {
						this.$notify({
                            title: '提示',
                            message: '保存成功',
                            type: 'success',
                            duration:1000
                        });
						this.dialogFormVisible = false
						//报损列表
						var params2 = {
							"breedId": this.$route.query.id,
							"searchName": this.searchName2,
							"page": this.page2
						}
						loss_findByList(params2).then((res) => {
							this.tableData2 = res.rows;
							this.total2 = res.total;
						});
					}
				});
			}
		}
	}
</script>

<style scoped>
	.el-pagination {
	    text-align: center;
	}
</style>
